<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Starter</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/css/AdminLTE.css">
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect.
    -->
    <link rel="stylesheet" href="/css/skins/skin-blue.min.css">

    <!-- bootstrap datepicker -->
    <link rel="stylesheet" href="/js/plugins/datepicker/datepicker3.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <!-- jQuery 2.2.3 -->
    <script src="/js/jquery/1.11.1/jquery.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="/js/bootstrap/bootstrap.min.js"></script>
    <!-- AdminLTE App -->
    <script src="/js/app.min.js"></script>
    <![endif]-->

    <script>

        $(document).ready(function(){

            $("#member-detail-box").empty();
            $("#member-detail-box").load("/member/memberDetail");

        });
    </script>
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed                                   |
|               | layout-boxed                            |
|               | layout-top-nav                          |
|               | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->
<body>


<!-- Content Wrapper. Contains page content -->
<div>
    <!-- Content Header (Page header) -->
    <section class="content-header">
    <#--main标题-->
        <h1>
            客户行为记录
        </h1>
    <#--右侧快捷导航栏-->
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 行为识别</a></li>
            <li class="active">行为记录</li>
        </ol>
    </section>
    <!-- Main content -->
    <section id="main_section" class="content">

        <div class="box box-default">
            <div class="box-header with-border">
                <h3 class="box-title">请选择客户</h3>
            </div>
            <div class="box-body">
                <div class="row">

                    <div class="col-md-2">
                        <select id="selectMemberId" class="form-control select2" style="width: 100%;" onchange="chengeMemberActionRecord()">
                        <#list memberList as m>
                            <#if m.memberId==member.memberId>
                                <option value=${m.memberId} selected="true">${m.memberName}</option>
                            <#else>
                                <option value=${m.memberId}>${m.memberName}</option>
                            </#if>


                        </#list>
                        </select>

                    </div>
                    <div hidden="hidden">
                        <input id="memberId" type="number" value="${member.memberId}">
                    </div>

                    <div class="col-md-4">
                        <div class="input-group date">
                            <div class="input-group-addon">
                                <i class="fa fa-calendar">查询日期</i>
                            </div>

                            <input type="text" class="form-control pull-right" value="${member.trackDayStr}"
                                   id="trackday" placeholder="yyyy-mm-dd">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <button id="searchTrack" class="btn btn-info pull-right"
                                onclick="chengeMemberActionRecord()">查询
                        </button>
                    </div>
                </div>
            </div>

        </div>
        <div class="row">
            <div id="member_health" class="col-md-12">

                <#--<div class="col-xs-12">-->
                    <div class="box box-primary">
                        <div class="box-header">
                            <h3 class="box-title">日常行为记录</h3>

                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <table id="health_index" class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th style="display:none">id</th>
                                    <th style="display:none">memberId</th>
                                    <th style="display:none">isupdate</th>
                                    <th>日期(YYYY-MM-DD)</th>
                                    <th>位置</th>
                                    <th>当前状态</th>
                                    <th>开始时间</th>
                                    <th>结束时间</th>
                                </tr>
                                </thead>

                                <tbody>
                                <#list records as record>
                                <tr>
                                    <td style="display: none">${record.id}</td>
                                    <td style="display: none">${record.memberId}</td>
                                    <td style="display: none">0</td>
                                    <td>${record.sampleTime?date}</td>
                                    <td><a href="javascript:showAreaPic(${record.xPosition},${record.yPosition},#{record.status},#{record.floor})">${record.areaDesc}</a></td>
                                    <td>${record.actionType}</td>
                                    <td>${record.startTimeStr}</td>
                                    <td>${record.endTimeStr}</td>
                                </tr>
                                </#list>

                            </table>

                        </div>

                    </div>

        </div>
        </div>




    </section>

</div>
<!-- Content Wrapper. Contains page content -->

<!-- jQuery 2.2.3 -->
<script src="/js/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/js/bootstrap/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="/js/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/js/plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- bootstrap datepicker -->
<script src="/js/plugins/datepicker/bootstrap-datepicker.js"></script>
<script>

    $('#datepicker').datepicker({
        autoclose: true
    });
    $('#checkInDay').datepicker({
        autoclose: true
    });

</script>
</body>
</html>
